import { memo } from 'react';
import type { CSSProperties, FC, PropsWithChildren } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Layout } from 'antd';
import '@/styles/router-transition.css';
import SideMenu from '@/pages/Profile/SideMenu';
import './index.scss';

const { Sider, Content } = Layout;

export const SecondLayoutStyle: CSSProperties = {
  height: 'calc(100vh - 55px)',
};


const ProfilePage: FC<PropsWithChildren<{}>> = () => {
  return (
    <Layout style={SecondLayoutStyle} className={'profile-page overflow-hidden'}>
      <Sider className={''}>
        <SideMenu />
      </Sider>
      <Layout className={'profile-main-content'}>
        <Content>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default memo(ProfilePage);
